<template>
	<view class="goods">
		<view class="" style="width: 2%;" v-if="isSelect">
			<u-icon name="checkmark-circle" size="25"></u-icon>
		</view>
		<view class="goods-left">
			<view class="goods-img"></view>
			<view class="goods-info">
				<view class="goods-name">
					保养机油
				</view>
				<view class="goods-attr">
					<view class="">
						5W 40
					</view>
					<view class="m-l-10">
						库存12桶
					</view>
				</view>
				<view class="">
					<u-text size="14" mode="price" text="728732.32" :color="$u.color.priceColor">
					</u-text>
				</view>
			</view>
		</view>
		<view class="goods-right">
			<view class="btn" @click="btn()">
				加入购物车
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			info: {
				type: Object,
				default: {}
			},
			isSelect: {
				type: Boolean,
				default: false
			},
			type: {
				type: [String, Number],
				default: 1
			}
		},
		data() {
			return {}
		}
	}
</script>

<style lang="scss">
	.goods {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin: 30rpx 0;

		&-left {
			display: flex;
			flex-direction: row;
		}

		&-img {
			width: 150rpx;
			height: 150rpx;
			background-color: #fff;
			border-radius: $radius;
			box-shadow: $shadow;
		}

		&-info {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			margin-left: 15rpx;
			font-size: 30rpx;
		}

		&-name {
			color: #000;
			font-weight: bold;
		}

		&-attr {
			display: flex;
			flex-direction: row;
			font-size: 24rpx;
			color: $u-light-color;
		}

		&-right {
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			font-size: 24rpx;
		}
	}
</style>
